<template>
  <div class="homePage" id="exit">
    <div class="bar_title">
      <span @click="routerChange('neighborhoodList', 1)">
        {{
        currentVillage
        }}
      </span>
      <svg-icon icon-class="首页箭头" widthW="0.4rem" heightH="0.427rem" @click.native="routerChange('neighborhoodList', 1)">
      </svg-icon>
    </div>
    <div class="swipe-style">
      <van-swipe :autoplay="3000" indicator-color="#DC4630">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image.imageUrl" :key="image.imageUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="notice-style">
      <div class="notice-icon-style">
        <svg-icon icon-class="公告" widthW="0.4rem" heightH="0.427rem" class="logo-icon-style"></svg-icon>
        <span class="notice-icon-text-style">公告</span>
      </div>
      <div class="notice-text-style">
        <van-swipe class="notice-swipe-style" :autoplay="3000" :show-indicators="false" vertical>
          <van-swipe-item v-for="(notice, index) in noticeList" :key="index"
            @click="routerChange('noticeDetails', notice.id)">
            <p class="notice-item-style">{{ notice.subject }}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="serve-style">
      <van-grid :gutter="10" :border="false" :column-num="4">
        <van-grid-item v-for="(item, index) in serverList" :key="index" @click="handleMenu(item)">
          <svg-icon :icon-class="item.icon" widthW="1.2rem" heightH="1.2rem"></svg-icon>
          <span class="serve-item-style">{{ item.app_name }}</span>
        </van-grid-item>
        <!-- <van-grid-item @click="moreServes()">
          <svg-icon
            icon-class="首页-更多"
            widthW="1.2rem"
            heightH="1.2rem"
          ></svg-icon>
          <span class="serve-item-style">更多</span>
        </van-grid-item>-->
      </van-grid>
    </div>
    <div class="home-jf" @click="$router.push({ name: 'publicBar' })">
      <img src="../../icons/img/home-jf.png" alt />
    </div>
    <div class="dynamic-style">
      <p class="dynamic-title-style">社区动态</p>
      <van-tabs v-model="active" swipeable title-active-color="#DC4630" title-inactive-color="#666666"
        @change="tabChange" :sticky="true" :offset-top="46">
        <van-tab v-for="(item, index) in dynamicTypeList" :key="index" :title="item">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="300">
              <ul class="dynamic_content_list">
                <li v-for="option in dynamicList" :key="option.id" @click="routerChange('dynamicDetails', option.id)">
                  <div class="content_text">
                    <p class="content_title">{{ option.subject }}</p>
                    <p class="content_time">{{ option.creationDate }}</p>
                  </div>
                  <img v-lazy="option.headImage" :key="option.headImage" />
                </li>
              </ul>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import bus from "../../utils/eventBus";
  import api from "@/controller/Interface.js";
  import constant from "@/controller/constant.js";
  import {
    Dialog
  } from "vant";
  export default {
    name: "homePage",
    data() {
      return {
        // dynamicTypeList: ["全部", "党建头条", "社区头条"],
        dynamicTypeList: ["党建新闻", "社区头条"],
        active: 0,
        isLoading: false,
        images: [],
        noticeList: [],
        serverList: [{
            id: 7,
            app_name: "物业报修",
            icon: "物业报修",
            path: "/work/propertyRepair",
            app_category: 1
          },
          {
            id: 17,
            app_name: "政务服务",
            icon: "政务服务",
            path: "/work/govAffairs",
            app_category: 3
          },
          {
            id: 14,
            app_name: "就业培训",
            icon: "就业培训",
            path: "/work/employmentTraining/employmentTraining",
            app_category: 3
          },
          {
            id: 16,
            app_name: "社区养老",
            icon: "养老服务",
            path: "/work/oldAgeService",
            app_category: 3
          }
        ],
        dynamicList: [],
        currentVillage: "",
        noticePage: 1,
        noticePageSize: 3,
        bannerPage: 1,
        bannerPageSize: 3,
        dynamicPage: 1,
        pageSize: 6,
        dynamicPage1: 1,
        dynamicPage2: 1,
        loading: false,
        finished: true
      };
    },
    mounted() {
      if (JSON.parse(localStorage.getItem("userInfo")).shequId) {
        this.getVillageDetail(
          JSON.parse(localStorage.getItem("userInfo")).shequId
        );
      } else {
        Dialog.alert({
          message: "请先选择社区"
        }).then(() => {
          this.$router.push("neighborhoodList");
        });
      }
      bus.$on("villageName", data => {
        this.currentVillage = data;
        this.init();
      });
      bus.$on("login", () => {
        this.init();
      });
      // bus.$on("updateAppList", () => {
      //   this.getHomeAppList();
      // });
      this.init();
    },
    destroyed: function () {
      bus.$off("villageName");
      bus.$off("login");
      // bus.$off("updateAppList");
    },
    methods: {
      // moreServes() {
      //   bus.$emit("updateAppListMore", this.serverList);
      //   this.$router.push({
      //     name: "moreServes",
      //     query: { appList: this.serverList }
      //   });
      // },
      init() {
        this.dynamicList = []
        this.noticeList = []
        this.images = []
        this.dynamicPage = 1;
        this.dynamicPage1 = 1;
        this.dynamicPage2 = 1;
        this.noticePage = 1;
        this.bannerPage = 1;
        this.active = 0;
        // this.getHomeAppList();
        this.getNoticeList();
        this.getBannerList();
        // this.getDynamicList(0, this.dynamicPage, this.pageSize);
        this.getDynamicList(1, this.dynamicPage1, this.pageSize);
      },
      onLoad() {
        switch (this.active) {
          // case 0:
          //   this.getDynamicList(0, this.dynamicPage, this.pageSize);
          //   break;
          case 0:
            this.getDynamicList(1, this.dynamicPage1, this.pageSize);
            break;
          case 1:
            this.getDynamicList(2, this.dynamicPage2, this.pageSize);
            break;
          default:
            break;
        }
      },
      getVillageDetail(id) {
        api.community_neighborhood_by_id(id).then(res => {
          if (res.code === "0") {
            if (res.datas && res.datas.name) {
              this.currentVillage = res.datas.name;
            } else {
              Dialog.alert({
                message: "请先选择社区"
              }).then(() => {
                this.$router.push("neighborhoodList");
              });
            }
          } else {
            if (res.code === "2") {
              Dialog.alert({
                message: "请先选择社区"
              }).then(() => {
                this.$router.push("neighborhoodList");
              });
            } else if (res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      // getHomeAppList() {
      //   api.userApp_v1_findOwn().then(res => {
      //     if (res.code === "0") {
      //       const arr = res.datas;
      //       const tmpArr = constant.appList;
      //       this.serverList = [];
      //       if (arr.length) {
      //         arr.forEach(e => {
      //           tmpArr.forEach(ele => {
      //             if (e.appId === ele.id) {
      //               this.serverList.push(ele);
      //             }
      //           });
      //         });
      //       }
      //     } else {
      //       if (res.code === "2") {
      //         Dialog.alert({
      //           message: "请先选择社区"
      //         }).then(() => {
      //           this.$router.push("neighborhoodList");
      //         });
      //       } else if (res.msg) {
      //         this.$toast(res.msg);
      //       } else {
      //         this.$toast(constant.unusualMsg);
      //       }
      //     }
      //   });
      // },
      getDynamicList(category, curPage, pageSize) {
        const data = {
          category: category,
          curPage: curPage,
          pageSize: pageSize
        };
        api.communityAffairs_v1_list_frontEnd(data).then(res => {
          if (res.code === "0") {
            this.finished = false;
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多动态");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            switch (this.active) {
              case 0:
                this.dynamicPage = this.dynamicPage + 1;
                break;
              case 1:
                this.dynamicPage1 = this.dynamicPage1 + 1;
                break;
              case 2:
                this.dynamicPage2 = this.dynamicPage2 + 1;
                break;
              default:
                break;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < this.pageSize) {
              this.finished = true;
            }
            if (curPage === 1) {
              this.dynamicList = [];
            }
            this.dynamicList = [...this.dynamicList, ...res.datas.records];
            return;
          } else {
            if (res.code === "2") {
              Dialog.alert({
                message: "请先选择社区"
              }).then(() => {
                this.$router.push("neighborhoodList");
              });
            } else if (res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      getNoticeList() {
        const data = {
          curPage: this.noticePage,
          pageSize: this.noticePageSize
        };
        api.announcements_v1_list_frontEnd(data).then(res => {
          if (res.code === "0") {
            if (!res.datas.records.length) {
              this.noticeList.push({subject: '暂无公告'})
              this.$toast("暂无更多公告");
              return;
            }
            this.noticeList = res.datas.records;
          } else {
            if (res.code === "2") {
              Dialog.alert({
                message: "请先选择社区"
              }).then(() => {
                this.$router.push("neighborhoodList");
              });
            } else if (res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      getBannerList() {
        const data = {
          curPage: this.bannerPage,
          pageSize: this.bannerPageSize
        };
        api.banner_v1_list_frontEnd(data).then(res => {
          if (res.code === "0") {
            if (!res.datas.records.length) {
              this.images.push({imageUrl: require('@/assets/err.png')})
              this.$toast("暂无banner图");
              return;
            }
            this.images = res.datas.records;
          } else {
            if (res.code === "2") {
              Dialog.alert({
                message: "请先选择社区"
              }).then(() => {
                this.$router.push("neighborhoodList");
              });
            } else if (res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      onRefresh() {
        this.dynamicList = [];
        setTimeout(() => {
          switch (this.active) {
            // case 0:
            //   this.dynamicPage = 1;
            //   this.pageSize = 6;
            //   this.getDynamicList(0, this.dynamicPage, this.pageSize);
            //   break;
            case 0:
              this.dynamicPage1 = 1;
              this.pageSize = 6;
              this.getDynamicList(1, this.dynamicPage1, this.pageSize);
              break;
            case 1:
              this.dynamicPage2 = 1;
              this.pageSize = 6;
              this.getDynamicList(2, this.dynamicPage2, this.pageSize);
              break;
            default:
              break;
          }
          this.isLoading = false;
        }, 500);
      },
      routerChange(urlName, data) {
        if (data) {
          this.$router.push({
            name: urlName,
            query: data
          });
        }
      },
      tabChange(name, title) {
        this.finished = true;
        this.dynamicList = [];
        switch (title) {
          // case "全部":
          //   this.dynamicPage = 1;
          //   this.pageSize = 6;
          //   this.getDynamicList(0, this.dynamicPage, this.pageSize);
          //   break;
          case "党建新闻":
            this.dynamicPage1 = 1;
            this.pageSize = 6;
            this.getDynamicList(1, this.dynamicPage1, this.pageSize);
            break;
          case "社区头条":
            this.dynamicPage2 = 1;
            this.pageSize = 6;
            this.getDynamicList(2, this.dynamicPage2, this.pageSize);
            break;
          default:
            break;
        }
      },
      handleMenu(val) {
        if (
          val.app_name === "社区活动" ||
          val.app_name === "投票选举" ||
          val.app_name === "快递服务" ||
          val.app_name === "周边商家" ||
          val.app_name === "党群服务" ||
          val.app_name === "生活服务" ||
          val.app_name === "社区积分"
        ) {
          this.$toast("正在开发中,敬请期待。。。");
          return;
        } else {
          this.$router.push({
            path: val.path
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .homePage {
    margin-top: 1.22667rem;
    background: #f5f7fa;

    .bar_title {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 1.22667rem;
      line-height: 1.22667rem;
      text-align: center;
      user-select: none;
      -webkit-user-select: none;
      background-color: #dc4630;
      font-weight: 500;
      font-size: 0.48rem;
      color: #ffffff;
      z-index: 99;
    }

    .dynamic_content_list {
      padding: 15px 15px 0;

      li {
        width: 345px;
        display: flex;
        flex-wrap: wrap;
        padding: 15px 0;
        border-bottom: 1px solid #e2e2e2;

        .content_text {
          width: 245px;
        }

        img {
          float: right;
          height: 80px;
          width: 100px;
          border-radius: 5px;
        }

        .content_title {
          font-size: 14px;
          color: #333333;
          line-height: 20px;
        }

        .content_time {
          font-size: 12px;
          color: #999999;
          line-height: 16.5px;
          margin-top: 39px;
        }
      }

      li:last-child {
        border-bottom: none;
      }

      li:first-child {
        padding-top: 0;
      }
    }

    .swipe-style {
      border-radius: 10px;

      img {
        width: 375px;
        height: 160px;
      }
    }

    .notice-style {
      margin: 10.5px 15px;
      height: 38px;
      background: #ffffff;
      box-shadow: 0 0 15px 7px rgba(108, 108, 108, 0.05);
      border-radius: 8px;
      display: flex;
      flex-direction: row;

      .notice-icon-style {
        width: 40px;
        height: 40px;
        background-image: linear-gradient(90deg, #ff5907 0%, #dc4630 100%);
        border-radius: 8px 0 0 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .notice-icon-text-style {
          font-size: 9px;
          color: #fff;
        }
      }

      .notice-text-style {
        width: 288px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 0 8px 8px 0;
        padding-left: 7px;
        padding-right: 10px;

        .notice-swipe-style {
          height: 40px;

          .notice-item-style {
            font-size: 12px;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0;
          }
        }
      }
    }

    .serve-style {
      background: #ffffff;

      .serve-item-style {
        margin-top: 8px;
      }
    }

    .home-jf {
      background: #fff;
      width: 100%;

      img {
        width: 98%;
        display: block;
        margin: auto;
      }
    }

    .dynamic-style {
      margin-top: 10px;
      background: #ffffff;

      .van-tab {
        border-bottom: 1px solid #e2e2e2;
      }

      .dynamic-title-style {
        padding: 10px 0 9.5px 15px;
        font-size: 18px;
        color: #333333;
        border-bottom: 1px solid #e2e2e2;

        span {
          font-size: 14px;
          line-height: 20px;
          color: #999999;
          margin-right: 15px;
          float: right;
        }
      }

      // .dynamic-content-style {
      //   display: flex;
      //   flex-direction: row;
      //   flex-wrap: wrap;
      //   justify-content: space-between;
      //   margin-top: 15px;
      //   .dynamic-item-style {
      //     width: 165px;
      //     height: 170px;
      //     background: #FFFFFF;
      //     box-shadow: 0 10px 20px 0 #EBF0F1;
      //     border-radius: 10px;
      //     margin-bottom: 15px;
      //     img {
      //       width: 100%;
      //       height: 120px;
      //       border-radius: 10px 10px 0 0;
      //     }
      //     .item-title-style {
      //       margin: 0;
      //       margin-top: 6px;
      //       padding-left: 6px;
      //       font-size: 12px;
      //       color: #303133;
      //     }
      //     .item-time-style {
      //       margin: 0;
      //       margin-top: 6px;
      //       padding-left: 6px;
      //       font-size: 10px;
      //       color: rgb(204, 203, 203);
      //     }
      //   }
      // }
    }
  }
</style>